<template>
    <div>
        <div class="list Card padding-xs">
            <template v-if="token">
                <h2>发表你的看法观点！</h2>
                <template v-if="isReset">
                    <el-tinymce v-model="CommentContent" :height="300"></el-tinymce>
                </template>
                <el-button style="margin-top:10px" type="primary" :disabled="CommentContent == ''"
                    @click="SendContent(userId, null, null)">发 送</el-button>
            </template>


            <div class="text-theme" style="font-size: 20px;margin-top:10px">网友精彩评论</div>
            <div class="comment">
                <div class="comment-list"></div>

            </div>
            <el-empty description="暂无数据" v-if="CommentList.length == 0"></el-empty>
            <div v-for="(item, index) in CommentList">
                <div
                    style="display: flex;margin-top:10px;padding-bottom: 10px; border-bottom: 1px dashed rgb(209, 208, 208);">
                    <div>
                        <el-image :src="item.SendUserDto.ImageUrls"
                            style="width:24px;height: 24px;border-radius: 10px;">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline" style="font-size: 50px;"></i>
                            </div>
                        </el-image>
                    </div>
                    <div class="margin-left-xs flex-sub ">
                        <div style="font-size: 20px;">{{ item.SendUserDto.Name }}</div>
                        <div class="comment_content" v v-html="item.Content"></div>

                        <div class="text-gray margin-top-xs pointer">{{ item.CreationTime }}

                            <span style="float: right;color:red" v-if="item.CreatorId == userId"
                                @click="DeleteComment(item.Id)">删
                                除</span>
                            <span style="margin-right:10px;float: right;color:#66B1FF" @click="ReplyComment(item)">回
                                复</span>
                            <span style="margin-right:10px;float: right;color:#f0810b"
                                v-if="item.IsLove == false || item.IsLove == null" @click="Love(item)">点
                                赞</span>
                            <span style="margin-right:10px;float: right;color:#f0810b" v-if="item.IsLove == true"
                                @click="CancelLove(item)">取消点赞</span>
                        </div>
                    </div>
                </div>
                <div class="children_comment_list" v-for="(ChildrenItem, Childrenindex) in item.Children">
                    <div
                        style="display: flex;margin-top:10px;padding-bottom: 10px; border-bottom: 1px dashed rgb(209, 208, 208);">
                        <div>
                            <el-image :src="ChildrenItem.SendUserDto.ImageUrls"
                                style="width:24px;height: 24px;border-radius: 10px;">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline" style="font-size: 50px;"></i>
                                </div>
                            </el-image>
                        </div>
                        <div class="margin-left-xs flex-sub">
                            <div style="font-size: 20px;">{{ ChildrenItem.SendUserDto.Name }}<span
                                    v-if="ChildrenItem.TargetUserId != item.SendUserId"><span
                                        class="margin-left-xs margin-right-xs text-gray">回复</span> {{
                                            ChildrenItem.TargetUserDto.Name }}</span></div>
                            <div class="comment_content" v v-html="ChildrenItem.Content"></div>

                            <div class="text-gray margin-top-xs pointer">{{ ChildrenItem.CreationTime
                                }}

                                <span style="float: right;color:red" v-if="ChildrenItem.CreatorId == userId"
                                    @click="DeleteComment(ChildrenItem.Id)">删 除</span>
                                <span style="margin-right:10px;float: right;color:#66B1FF"
                                    @click="ReplyComment(ChildrenItem)">回
                                    复</span>
                                <span style="margin-right:10px;float: right;color:#f0810b"
                                    v-if="ChildrenItem.IsLove == false || ChildrenItem.IsLove == null"
                                    @click="Love(ChildrenItem)">点
                                    赞</span>
                                <span style="margin-right:10px;float: right;color:#f0810b"
                                    v-if="ChildrenItem.IsLove == true" @click="CancelLove(ChildrenItem)">取消点赞</span>
                            </div>
                        </div>
                    </div>

                </div>


            </div>
        </div>
        <el-dialog title="回复评论" :visible.sync="replyCommentShow" width="80%" :lock-scroll="true" height="800px">
            <el-form v-if="replyCommentShow == true" ref="editModalForm" :model="formData" label-width="140px"
                size="mini">
                <el-row :gutter="10">
                    <el-tinymce v-model="formData.Content" :height="300"></el-tinymce>
                </el-row>


                <el-row type="flex" justify="end" align="bottom">
                    <el-form-item>
                        <el-button type="primary" plain @click="ReplyCommentSubmit()">确 定</el-button>
                        <el-button @click="replyCommentShow = false">取 消</el-button>
                    </el-form-item>
                </el-row>
            </el-form>

        </el-dialog>
    </div>
</template>

<script>
import store from '@/store';
import { mapGetters } from 'vuex'
export default {
    name: "TopicCommentTree",
    computed: {
        ...mapGetters([
            'name', 'roleTypeFormat', 'avatar', 'loginTimePeriod', "user", 'roleType', 'userId', 'token'
        ])
    },
    props: {

        RelativeId: {

        },
        Type: {

        },
    },
    watch: {
        RelativeId: function (n, o) {
            if (n != o) {
                this.GetCommentApi();
            }
        }
    },
    data() {
        return {
            CommentContent: "",
            formData: {},
            isReset: true,
            replyCommentShow: false,
        };
    },
    beforeCreate(e) {

    },
    created() {
        this.GetCommentApi();
    },
    methods: {
        async GetCommentApi() {
            let { Data: { Items, TotalCount } } = await this.$Post(`/Comment/RootList`, { RelativeId: this.$props.RelativeId, Type: this.$props.Type });
            this.TotalCount = TotalCount;
            this.CommentList = Items;
            this.$forceUpdate();
        },
        //发表内容
        async SendContent() {
            if (this.$comm.CheckIsLogin()) {
                let { Data } = await this.$Post(`/Comment/Get`, {});
                Data.Content = this.CommentContent;
                Data.RelativeId = this.$props.RelativeId;
                Data.NickName = this.name;
                Data.HeadImage = this.avatar;
                Data.SendUserId = this.userId;
                Data.Type = this.$props.Type;
                Data.RootCommentId = 0;
                var { Success } = await this.$PostLoading(`/Comment/CreateOrEdit`, Data);
                this.CommentContent = "";
                this.isReset = false;
                this.$message.success("发表成功")
                this.GetCommentApi();
                setTimeout(() => {
                    this.CommentContent = "";
                    this.isReset = true;
                }, 100)
            }
        },
        //回复评论
        async ReplyComment(Comment) {
            if (this.$comm.CheckIsLogin()) {
                let Data = {};
                Data.RelativeId = this.$props.RelativeId;
                Data.NickName = this.name;
                Data.HeadImage = this.avatar;
                Data.SendUserId = this.userId;
                Data.Type = this.$props.Type;
                Data.TargetUserId = Comment.SendUserId;
                Data.RootCommentId = Comment.RootCommentId != 0 ? Comment.RootCommentId : Comment.Id;
                this.formData = Data;
                this.replyCommentShow = true;
            }

        },
        //提交评论
        async ReplyCommentSubmit() {
            if (this.$comm.CheckIsLogin()) {

                var { Success } = await this.$PostLoading(`/Comment/CreateOrEdit`, this.formData);
                this.formData = {};
                this.replyCommentShow = false;
                this.$message.success("发表成功")
                this.GetCommentApi();
            }
        },
        //删除自己的评论
        async DeleteComment(Id) {
            await this.$PostDelete(`/Comment/Delete`, { Id: Id });
            this.GetCommentApi();
        },
        //点赞评论
        async Love(item) {
            if (this.$comm.CheckIsLogin()) {

                var { Success } = await this.$PostLoading(`/CommentLove/CreateOrEdit`, {
                    RelativeId: this.$props.RelativeId,
                    Type: this.$props.Type,
                    CommentId: item.Id,
                    UserId: this.userId,


                });
                this.formData = {};
                this.replyCommentShow = false;
                item.IsLove = true;
                this.$forceUpdate();
                this.$message.success("点赞成功")

            }
        },
        async CancelLove(item) {
            let { Data } = await this.$Post(`/CommentLove/Get`, { Id: 0, CommentId: item.Id, UserId: this.userId });
            var { Success } = await this.$PostLoading(`/CommentLove/Delete`, {
                Id: Data.Id
            });
            item.IsLove = false;
            this.$forceUpdate();
            this.$message.success("取消点赞成功")
        }


    },

};
</script>
<style>
.Card {
    background: #fff;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 3px hsla(0, 0%, 7%, .1);
    box-shadow: 0 1px 3px hsla(0, 0%, 7%, .1);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 10px;
    overflow: hidden;
}

.RightSideBar {
    width: 296px;
    -webkit-align-self: normal;
    -ms-flex-item-align: normal;
    align-self: normal;
}

.avator-img {
    width: 64px;
    height: 64px;
    border-radius: 5px;
}

.children_comment_list {
    margin-left: 40px;
}

.rich_content {
    color: #2a2a2a;
    font-size: 16px;
    line-height: 32px;
    word-break: break-all;
    word-wrap: break-word;
    position: relative;
}

.comment_content {
    margin-top: 0px;
    color: #2a2a2a;
    font-size: 16px;
    line-height: 32px;
    word-break: break-all;
    word-wrap: break-word;
    position: relative;
    overflow: hidden;
    width: 100%;


}
</style>
